<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide swiper-slide1"><p>Slide 1</p><div class="box"></div></div>
      <div class="swiper-slide swiper-slide2"><p>Slide 2</p><div class="box"></div></div>
      <div class="swiper-slide swiper-slide3"><p>Slide 3</p><div class="box"></div></div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <!-- <div class="swiper-button-prev"></div> -->
    <!-- <div class="swiper-button-next"></div> -->
  </div>
</template>

<script>
import Swiper from "swiper"; // 注意引入的是Swiper
import "swiper/css/swiper.min.css"; // 注意这里的引入

export default {
  name: "test",
  mounted() {
    var mySwiper = new Swiper(".swiper-container", {
      // config...
      loop: true,
      // 分页器配置项(导航点)
      pagination: {
        el: ".swiper-pagination", // 包裹小圆点的类名，可自定义
        // clickable: true, // 点击小圆点，也可以滚动轮播图。默认false
        // type: "bullets", // 分页器样式类型，默认bullets 圆点样式
        // bulletElement: "span", // 设置小圆点的标签，默认为span
      },
    })
  },
}
</script>

<style scoped lang="less">
.swiper-container {
  width: 100%;
  height: 240px;
  box-sizing: border-box;
}
.swiper-slide {
  text-align: center;
  line-height: 240px;
  color: #b0b0b0;
  position: relative;
  .box {
    width: 100%;
    height: 40px;
    background: pink;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}


.swiper-slide1 {
  background: lightseagreen;
}

.swiper-slide2 {
  background: skyblue;
}

.swiper-slide3 {
  background: yellowgreen;
}

/*小圆点的样式，需要单独写一个不带scoped属性的style标签*/
.swiper-pagination-bullet {
    margin-left: 5px;

    &.swiper-pagination-bullet-active {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #fff;
    }
}
</style>
